<template>
  <div class="flex w-full h-full">
    <ThemeSwitch v-show="false"></ThemeSwitch>
    <aside class="w-0 bg-gray-200 dark:bg-gray-900 lg:w-96 transition-all duration-300 flex flex-col justify-between">
      <div class="w-96">
        <LogoButton></LogoButton>
      </div>
      <div class="overflow-hidden mx-auto rounded-xl">
        <img class="w-80" :src="imgSrc" alt="img"/>
      </div>
      <div class="hidden lg:block  mx-auto text-gray-500">
        欢迎使用
      </div>
    </aside>
    <main class="flex justify-center items-center flex-1">
      <div class="w-96 h-96  space-y-10">
        <div class="text-3xl font-bold">欢迎使用RedisWeb</div>
        <div>
          <n-tabs type="segment" animated >
            <n-tab-pane name="邮箱登录" tab="邮箱登录">
              <EmailAuth></EmailAuth>
            </n-tab-pane>
            <n-tab-pane name="微信扫码登录" tab="微信扫码登录">
              <WechatAuth></WechatAuth>
            </n-tab-pane>
            <n-tab-pane name="用户名登录" tab="用户名登录">
              <UsernameAuth></UsernameAuth>
            </n-tab-pane>

          </n-tabs>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import LogoButton from "@/components/button/LogoButton.vue";


import img from '@/assets/img.png'
import EmailAuth from "@/views/auth/components/EmailAuth.vue";
import UsernameAuth from "@/views/auth/components/UsernameAuth.vue";
import WechatAuth from "@/views/auth/components/WechatAuth.vue";
import ThemeSwitch from "@/layout/common/components/ThemeSwitch.vue";
import {useWebSocketStore} from "@/store";
import {onBeforeMount, onUnmounted} from "vue";
import {wsUrl} from '~/settings'

const imgSrc = img


const websocketStore = useWebSocketStore();


onBeforeMount(() => {
  websocketStore.connect(wsUrl)
})

onUnmounted(() => {
  websocketStore.close()
})



</script>

<style scoped>

</style>